<template>
	<div>
		<endHead></endHead>
		<div class="bbb">
			<div class="bbd">
				<el-menu default-active @open="handleOpen" @close="handleClose" style="width: 100%;">
					<template class="tem">
						<el-submenu index="1">
							<template slot="title">热度管理</template>
							<el-menu-item :key="i" v-for="(item,i) in trees">
								<router-link :to="item.url" >{{item.name}}</router-link>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">类型管理</template>
							<el-menu-item :key="i" v-for="(item,i) in treetwos">
								<router-link :to="item.url">{{item.name}}</router-link>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">商品管理</template>
							<el-menu-item :key="i" v-for="(item,i) in treethree">
								<router-link :to="item.url">{{item.name}}</router-link>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">用户管理</template>
							<el-menu-item :key="i" v-for="(item,i) in treefour">
								<router-link :to="item.url">{{item.name}}</router-link>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">订单管理</template>
							<el-menu-item :key="i" v-for="(item,i) in treefive">
								<router-link :to="item.url">{{item.name}}</router-link>
							</el-menu-item>
						</el-submenu>
						<el-submenu index="6">
							<template slot="title">手机端管理</template>
							<el-menu-item>
								<router-link to="/mobile/home">app</router-link>
							</el-menu-item>

						</el-submenu>
					</template>
				</el-menu>
			</div>
			<router-view></router-view>


		</div>
		<endfoot></endfoot>
	</div>

</template>

<script>
	import endHead from './model/endHead.vue';
	import endfoot from './model/endfoot.vue';
	export default {
		name: 'BookBackend',
		components: {
			endHead,
			endfoot
		},
		data() {
			return {
				isCollapse: true,
				trees: [{
						url: '/bookbackend/endbacklist',
						name: '热度图片'
					},

				],
				treetwos: [{
						url: '/bookbackend/endbackTypeOne',
						name: '一级类型'
					},
					{
						url: '/bookbackend/endbackTypeTwo',
						name: '二级类型'
					},
				],
				treethree: [{
						url: '/bookbackend/shoplist',
						name: '商品列表'
					},

				],
				treefour: [{
						url: '',
						name: '密码重置'
					},
					{
						url: '',
						name: '添加管理'
					},
				],
				treefive: [{
						url: '/bookbackend/endbackOrder',
						name: '订单详情'
					},

				]
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				window.console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				window.console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.bbb {
		width: 95%;
		height: 780px;
		margin: 0 auto;
		display: flex;
	}

	.bbd {

		width: 12%;
		height: 100px;
		background-color: #0874FE;

	}
	.bbd .el-submenu__title{
		background-color: #393d49;
		color: white;
	}
		

</style>
